<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<!-- <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
 -->
<script src="../js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").toggle();
	
  });
  $("#Inout").click(function(){
  		$("#div1").fadeToggle();
  		$("#div2").fadeToggle("slow");
  		$("#div3").fadeToggle(3000);
  	});
  /* $("#show").click(function(){
    $("h2 ,p").show(1000);
  }); */
 $('.p1').css('background','#f00');
/* $('#ul li:eq(1)').css('background','#f00');
 */
$('#ul li:even').css('background','#f00');//偶数
 $('#ul li:odd').css('background','black');//奇数
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p class="p1">这是一个段落。</p>
<p class="p1">这是另一个段落。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="Inout">淡入淡出</button>
<img src="../images/con1.jpg"  id="div1"/>
<img src="../images/con2.jpg"  id="div2"/>
<img src="../images/con3.jpg"  id="div3"/>


<ul id="ul">
	<li>001</li>
	<li>002</li>
	<li>003</li>
</ul>
</body>
</html>